<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <link href="framework/reset.css" rel="stylesheet">
        <link href="framework/icon.css" rel="stylesheet">
        <link href="css/index.css" rel="stylesheet">
        <script src="js/index.js"></script>
        <title>饿了么 首页</title>
    </head>
    <body>
        <!-- 总容器 -->
        <div class="wrapper">
            <!-- header部分 -->
            <header>
                <div class="icon-location-box">
                    <div class="icon-location"></div>
                </div>
                <div class="location-text">天津大学北洋园校区47教第6机房<i class="fa fa-caret-down"></i></div>
            </header>
 
         <!-- search部分 -->
         <!-- 
             搜索框部分（此块与search-fixed-top块宽度高度一致，用于当
             search-fixed-top块固定后，挡住下面块不要窜上去） 
         -->
         <div class="search">
             <!-- 当滚动条超过上面的定位块时，search-fixed-top块变成固定在顶部。 -->
             <div class="search-fixed-top" id="fixedBox">
                 <!-- 搜索按钮部分中间的白框 -->
                 <div class="search-box">
                     <i class="fa fa-search"></i>搜索饿了么商家、商品名称
                 </div>
             </div>
         </div>
         
         <!-- 点餐分类部分 -->
         <ul class="foodtype">
             <li onclick="location.href='businessList.html'">
                 <img src="img/dcfl01.png">
                 <p>美食</p>
             </li>
             <li onclick="location.href='businessList.html'">
                 <img src="img/dcfl02.png">
                 <p>早餐</p>
             </li>
             <li onclick="location.href='businessList.html'">
                 <img src="img/dcfl03.png">
                 <p>跑腿代购</p>
             </li>
             <li onclick="location.href='businessList.html'">
                 <img src="img/dcfl04.png">
                 <p>汉堡披萨</p>
             </li>
             <li onclick="location.href='businessList.html'">
                 <img src="img/dcfl05.png">
                 <p>甜品饮品</p>
             </li>
             <li onclick="location.href='businessList.html'">
                 <img src="img/dcfl06.png">
                 <p>速食简餐</p>
             </li>
             <li onclick="location.href='businessList.html'">
                 <img src="img/dcfl07.png">
                 <p>地方小吃</p>
             </li>
             <li onclick="location.href='businessList.html'">
                 <img src="img/dcfl08.png">
                 <p>米粉面馆</p>
             </li>
             <li onclick="location.href='businessList.html'">
                 <img src="img/dcfl09.png">
                 <p>包子粥铺</p>
             </li>
             <li onclick="location.href='businessList.html'">
                 <img src="img/dcfl10.png">
                 <p>炸鸡炸串</p>
             </li>
         </ul>
         
         <!-- 横幅广告部分 -->
         <div class="banner">
             <h3>品质套餐</h3>
             <p>搭配齐全吃得好</p>
             <a>立即抢购 &gt;</a>
         </div>
         
         <!-- 超级会员部分 -->
         <div class="supermember">
             <div class="left">
                 <img src="img/super_member.png">
                 <h3>超级会员</h3>
                 <p>&#8226; 每月享超值权益</p>
             </div>
             <div class="right">
                 立即开通 &gt;
             </div>
         </div>
         
         <!-- 推荐商家部分 -->
         <div class="recommend">
             <div class="recommend-line"></div>
             <p>推荐商家</p>
             <div class="recommend-line"></div>
         </div>
         
         <!-- 推荐方式部分 -->
         <ul class="recommendtype">
             <li>综合排序<i class="fa fa-caret-down"></i></li>
             <li>距离最近</li>
             <li>销量最高</li>
             <li>筛选<i class="fa fa-filter"></i></li>
         </ul>
         
         <!-- 推荐商家列表部分 -->
         <ul class="business">
             <li onclick="location.href='businessInfo.html?id=1'">
                 <img src="img/sj01.png">
                 <div class="business-info">
                     <div class="business-info-h">
                         <h3>万家饺子（软件园E18店）</h3>
                         <div class="business-info-like">&#8226;</div>
                     </div>
                     <div class="business-info-star">
                         <div class="business-info-star-left">
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <p>4.9 月售345单</p>
                         </div>
                         <div class="business-info-star-right">
                             蜂鸟专送
                         </div>
                     </div>
                     <div class="business-info-delivery">
                         <p>&#165;15起送 | &#165;3配送</p>
                         <p>3.22km | 30分钟</p>
                     </div>
                     <div class="business-info-explain">
                         <div>各种饺子</div>
                     </div>
                     <div class="business-info-promotion">
                         <div class="business-info-promotion-left">
                             <div class="business-info-promotion-left-incon">新</div>
                             <p>饿了么新用户首单立减9元</p>
                         </div>
                         <div class="business-info-promotion-right">
                             <p>2个活动</p>
                             <i class="fa fa-caret-down"></i>
                         </div>
                     </div>
                     <div class="business-info-promotion">
                         <div class="business-info-promotion-left">
                             <div class="business-info-promotion-left-incon">特</div>
                             <p>特价商品5元起</p>
                         </div>
                     </div>
                 </div>
             </li>
             <li onclick="location.href='businessInfo.html?id=2'">
                 <img src="img/sj02.png">
                 <div class="business-info">
                     <div class="business-info-h">
                         <h3>小锅饭豆腐馆（全运店）</h3>
                         <div class="business-info-like">&#8226;</div>
                     </div>
                     <div class="business-info-star">
                         <div class="business-info-star-left">
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <p>4.9 月售345单</p>
                         </div>
                         <div class="business-info-star-right">
                             蜂鸟专送
                         </div>
                     </div>
                     <div class="business-info-delivery">
                         <p>&#155;15起送 | &#165;3配送</p>
                         <p>3.22km | 30分钟</p>
                     </div>
                     <div class="business-info-explain">
                         <div>各种饺子</div>
                     </div>
                     <div class="business-info-promotion">
                         <div class="business-info-promotion-left">
                             <div class="business-info-promotion-left-incon">新</div>
                             <p>饿了么新用户首单立减9元</p>
                         </div>
                         <div class="business-info-promotion-right">
                             <p>2个活动</p>
                             <i class="fa fa-caret-down"></i>
                         </div>
                     </div>
                     <div class="business-info-promotion">
                         <div class="business-info-promotion-left">
                             <div class="business-info-promotion-left-incon">特</div>
                             <p>特价商品5元起</p>
                         </div>
                     </div>
                 </div>
             </li>
             <li onclick="location.href='businessInfo.html?id=3'">
                 <img src="img/sj03.png">
                 <div class="business-info">
                     <div class="business-info-h">
                         <h3>麦当劳（天津大学北洋园店）</h3>
                         <div class="business-info-like">&#8226;</div>
                     </div>
                     <div class="business-info-star">
                         <div class="business-info-star-left">
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <p>4.9 月售2000单</p>
                         </div>
                         <div class="business-info-star-right">
                             蜂鸟专送
                         </div>
                     </div>
                     <div class="business-info-delivery">
                         <p>&#165;15起送 | &#165;3配送</p>
                         <p>0.52km | 20分钟</p>
                     </div>
                     <div class="business-info-explain">
                         <div>各种饺子</div>
                     </div>
                     <div class="business-info-promotion">
                         <div class="business-info-promotion-left">
                             <div class="business-info-promotion-left-incon">新</div>
                             <p>饿了么新用户首单立减9元</p>
                         </div>
                         <div class="business-info-promotion-right">
                             <p>2个活动</p>
                             <i class="fa fa-caret-down"></i>
                         </div>
                     </div>
                     <div class="business-info-promotion">
                         <div class="business-info-promotion-left">
                             <div class="business-info-promotion-left-incon">特</div>
                             <p>特价商品5元起</p>
                         </div>
                     </div>
                 </div>
             </li>
             <li onclick="location.href='businessInfo.html?id=4'">
                 <img src="img/sj04.png">
                 <div class="business-info">
                     <div class="business-info-h">
                         <h3>米村拌饭（浑南店）</h3>
                         <div class="business-info-like">&#8226;</div>
                     </div>
                     <div class="business-info-star">
                         <div class="business-info-star-left">
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <p>4.9 月售345单</p>
                         </div>
                         <div class="business-info-star-right">
                             蜂鸟专送
                         </div>
                     </div>
                     <div class="business-info-delivery">
                         <p>&#165;15起送 | &#165;3配送</p>
                         <p>3.22km | 30分钟</p>
                     </div>
                     <div class="business-info-explain">
                         <div>各种饺子</div>
                     </div>
                     <div class="business-info-promotion">
                         <div class="business-info-promotion-left">
                             <div class="business-info-promotion-left-incon">新</div>
                             <p>饿了么新用户首单立减9元</p>
                         </div>
                         <div class="business-info-promotion-right">
                             <p>2个活动</p>
                             <i class="fa fa-caret-down"></i>
                         </div>
                     </div>
                     <div class="business-info-promotion">
                         <div class="business-info-promotion-left">
                             <div class="business-info-promotion-left-incon">特</div>
                             <p>特价商品5元起</p>
                         </div>
                     </div>
                 </div>
             </li>
             <li onclick="location.href='businessInfo.html?id=5'">
                 <img src="img/sj05.png">
                 <div class="business-info">
                     <div class="business-info-h">
                         <h3>申记串道（中海康城店）</h3>
                         <div class="business-info-like">&#8226;</div>
                     </div>
                     <div class="business-info-star">
                         <div class="business-info-star-left">
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <i class="fa fa-star"></i>
                             <p>4.9 月售345单</p>
                         </div>
                         <div class="business-info-star-right">
                             蜂鸟专送
                         </div>
                     </div>
                     <div class="business-info-delivery">
                         <p>&#165;15起送 | &#165;3配送</p>
                         <p>3.22km | 30分钟</p>
                     </div>
                     <div class="business-info-explain">
                         <div>各种饺子</div>
                     </div>
                     <div class="business-info-promotion">
                         <div class="business-info-promotion-left">
                             <div class="business-info-promotion-left-incon">新</div>
                             <p>饿了么新用户首单立减9元</p>
                         </div>
                         <div class="business-info-promotion-right">
                             <p>2个活动</p>
                             <i class="fa fa-caret-down"></i>
                         </div>
                     </div>
                     <div class="business-info-promotion">
                         <div class="business-info-promotion-left">
                             <div class="business-info-promotion-left-incon">特</div>
                             <p>特价商品5元起</p>
                         </div>
                     </div>
                 </div>
             </li>
         </ul>
         
         <!-- 底部菜单部分 -->
         <ul class="footer">
             <li onclick="location.href='index.html'">
                 <i class="fa fa-home"></i>
                 <p>首页</p>
             </li>
             <li onclick="location.href='discover.html'">
                 <i class="fa fa-compass"></i>
                 <p>发现</p>
             </li>
             <li onclick="location.href='orderList.html'">
                 <i class="fa fa-file-text-o"></i>
                 <p>订单</p>
             </li>
             <li onclick="location.href='profile.html'">
                 <i class="fa fa-user-o"></i>
                 <p>我的</p>
             </li>
         </ul>
     </div>
 </body>
</html>